<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editModal"
        data-id="1">
  编辑
</button>


<div class="modal-body">
  <form>
    <div class="form-group">
      <label for="nameInput">名称</label>
      <input type="text" class="form-control" id="nameInput" placeholder="请输入名称"
             th:value="${category.name}">
    </div>
    <div class="form-group">
      <label for="numInput">数量</label>
      <input type="number" class="form-control" id="numInput" placeholder="请输入数量"
             th:value="${category.num}">
    </div>
  </form>
</div>



<script type="text/javascript">
  $(document).on('show.bs.modal', '#editModal', function (event) {
    var button = $(event.relatedTarget); // 触发 modal 的按钮元素
    var categoryId = button.data('id'); // 提取数据

    // 从后端获取要编辑的数据，并填充到 modal 中的表单元素中
    $.ajax({
      url: '/get-category/' + categoryId,
      type: 'GET',
      success: function (data) {
        $('#nameInput').val(data.name);
        $('#numInput').val(data.num);
      },
      error: function (xhr, status, error) {
        console.error(error);
      }
    });
  });


  $('#saveChangesBtn').click(function () {
    var categoryId = $('#editModal').data('id');
    var name = $('#nameInput').val();
    var num = $('#numInput').val();

    // 发送 AJAX 请求，更新数据
    $.ajax({
      url: '/update-category',
      type: 'POST',
      data: {
        id: categoryId,
        name: name,
        num: num
      },
      success: function () {
        location.reload();
      },
      error: function (xhr, status, error) {
        console.error(error);
      }
    });
  });


</script>



<!-- 数据列表 -->
<table class="table table-striped">
  <thead>
  <tr>
    <th>名称</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <!-- 遍历数据并渲染表格 -->
  <tr th:each="category : ${categories}">
    <td th:text="${category.name}"></td>
    <td>
      <!-- 创建编辑按钮，并将原数据传入编辑页面 -->
      <a th:href="@{'/admin/category/edit/' + ${category.id}}"
         class="btn btn-primary btn-sm waves-effect waves-light m-b-5">
        <i class="fa fa-edit"></i> <span>编辑</span></a>
    </td>
  </tr>
  </tbody>
</table>

<!-- 编辑表单 -->
<form method="post" th:action="@{/admin/category/save}">
  <!-- 隐藏域用于存储分类 ID -->
  <input type="hidden" th:field="*{id}" />
  <div class="form-group">
    <label>名称</label>
    <!-- 表单输入框，使用 Thymeleaf 表达式展示分类名称 -->
    <input type="text" class="form-control" th:field="*{name}"
           th:value="${category.name}" placeholder="请输入名称" />
  </div>
  <!-- 提交按钮 -->
  <button type="submit" class="btn btn-primary">保存</button>
</form>
